<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花店首页</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        body {
            background-color: #FFD8D9;

        }

        .div_body {
            width: 70%;
            border: 1px solid;
            margin: auto;
            margin-top: 10px;
        }

        #globallink table tr td {
            text-align: center;
            font-size: 20px;
            width: 200px;
            background: url("img/button1.jpg");
            color: blue;
        }

        #left {
            background-color: #fff;
            float: left;
            width: 20%;
            height: 1000px;
            padding: 10px;
            border-radp'xius: 10px;
        }
        #left ul li {
            font-size: 18px;
        }

        .category {
            padding: 20px;
        }

        .category ul li {
            list-style-image: url("img/icon1.gif");
            border-bottom: 1px dashed;
        }

        .category p {
            border: 1px solid red;
            background-color: #FFD1D1;
            width: 150px;
        }

        #main {
            background-color: #ffffff;
            float: right;
            width: 80%;
            height: 1000px;
        }

        .main_radius {

            border-radius: 10px;
        }

        #flower ul li {
            list-style-type: none;
            float: left;
            margin-left: 10px;
            text-align: center;
        }

        #flower1 ul li {
            list-style-type: none;
            float: left;
            margin-left: 10px;
            text-align: center;
        }


       .div1 {
           float: left;
            margin-top: 10px;
            margin-left: 100px;
        }
       .div2{
           float: right;
           margin-top: 10px;
           margin-right: 250px;
       }

    </style>
</head>
<body>

<div class="div_body">
    <div id="banner">
        <img src="img/banner.jpg" alt="" width="100%" height="120px">
    </div>
    <div id="globallink">
        <table>
            <tr>
                <td>鲜花礼品</td>
                <td>鲜花礼品</td>
                <td>鲜花礼品</td>
                <td>鲜花礼品</td>
                <td>鲜花礼品</td>
                <td>鲜花礼品</td>
                <td>鲜花礼品</td>
            </tr>
        </table>
    </div>
    <div>
        <div id="left">
            <img src="img/login.jpg" alt=""><br>
            用户：<input type="text"><br>
            密码：<input type="text"><br>
            <input type="button" value="登录">
            <input type="button" value="注册">
            <a href="javascript:void(0);">忘记密码</a>
            <br>
            <br>
            <img src="img/category.jpg" alt="">
            <div class="category">
                <p>用途</p>
                <ul>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                </ul>
            </div>
            <div class="category">
                <p>用途</p>
                <ul>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                </ul>
            </div>
            <div class="category">
                <p>用途</p>
                <ul>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>
                    <li>爱情鲜花</li>

                </ul>
            </div>
        </div>
        <div id="main">
            <div class="main_radius">
                <img src="img/latest.jpg" alt="" width="100%"><br>
                <img src="img/new1.jpg" alt="" width="33%" height="100px">
                <img src="img/new2.jpg" alt="" width="33%" height="100px">
                <img src="img/new3.jpg" alt="" width="33%" height="100px">
            </div>
            <div class="main_radius flowerSort" id="flower">
                <img src="img/latest.jpg" alt="" width="100%"><br>
                <ul>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>
                    <li><img src="img/flower1.jpg" alt="" width="150px" height="120px"> <br>幸福的味道<br>￥100</li>

                </ul>
            </div>
            <div class="main_radius" id="flower1">
                <img src="img/latest.jpg" alt="" width="100%"><br>
                <ul>
                    <li><img src="img/flower10.jpg" alt="" height="150px" width="200"><br>粉色迷情</li>
                </ul>
                <ul>
                    <li><img src="img/flower10.jpg" alt="" height="150px" width="200"><br>粉色迷情</li>
                </ul>
                <ul>
                    <li><img src="img/flower10.jpg" alt="" height="150px" width="200"><br>粉色迷情</li>
                </ul>
                <ul>
                    <li><img src="img/flower10.jpg" alt="" height="150px" width="200"><br>粉色迷情</li>
                </ul>
            </div>
            <div class="main_radius" id="flower2">
                <img src="img/latest.jpg" alt="" width="100%"><br>
                <div class="div1">
                    <ul>
                        <li>
                            养花的养生之道
                        </li>
                        <li>
                            养花的养生之道
                        </li>
                        <li>
                            养花的养生之道
                        </li>
                        <li>
                            养花的养生之道
                        </li>
                    </ul>
                </div>
                <div class="div2">
                    <ul>
                        <li>
                            养花的养生之道
                        </li>
                        <li>
                            养花的养生之道
                        </li>
                        <li>
                            养花的养生之道
                        </li>
                        <li>
                            养花的养生之道
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>